<template>
    <div class="categories">
        <el-card class="box-card">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>商品管理</el-breadcrumb-item>
                <el-breadcrumb-item>商品分类</el-breadcrumb-item>
            </el-breadcrumb>
            <el-button type="success" plain style="margin: 10px 0;" @click="openCate">添加分类</el-button>
            <el-table :data="dataTable.result" style="width: 100%;" row-key="cat_id" height="450px"
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                <el-table-column label="分类名称" prop="cat_name"></el-table-column>
                <el-table-column label="级别" prop="cat_level">
                    <template slot-scope="scope">
                        <div v-if="scope.row.cat_level==0">一级</div>
                        <div v-else-if="scope.row.cat_level==1">二级</div>
                        <div v-else>三级</div>
                    </template>
                </el-table-column>
                <el-table-column label="是否有效" prop="cat_deleted">
                    <template slot-scope="scope">
                        <div v-if="scope.row.cat_deleted==false">有效</div>
                        <div v-else>无效</div>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" plain size="small" icon="el-icon-edit" circle @click="updateCates(scope.row)"></el-button>
                        <el-button type="danger" plain size="small" icon="el-icon-delete" circle @click="removeCate(scope.row)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="+goodsParams.pagenum"
                :page-sizes="[5,10,15,20]"
                :page-size="+goodsParams.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="dataTable.total">
            </el-pagination>
            <el-dialog title="添加商品分类" :visible.sync="cateInfoDialog">
                <el-form ref="cateInfoForm" :model="cateInfoForm">
                    <el-form-item prop="cat_name" label="分类名称" label-width="100px">
                        <el-input v-model="cateInfoForm.cat_name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="分类" label-width="100px">
                        <el-cascader clearable v-model="checkList" :options="options" :props="{ expandTrigger: 'hover',label:'cat_name',value:'cat_id'}"></el-cascader>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="cateInfoDialog = false">取 消</el-button>
                    <el-button type="primary" @click="addCates">确 定</el-button>
                </div>
            </el-dialog>
            <el-dialog title="修改商品分类" :visible.sync="updateCate">
                <el-form>
                    <el-form-item label="分类名称" label-width="100px">
                        <el-input v-model="cateName" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="updateCate = false">取 消</el-button>
                    <el-button type="primary" @click="submitCates(cateInfoForm.cat_id,cateName)">确 定</el-button>
                </div>
            </el-dialog>
        </el-card>
    </div>
</template>
<script>
import {catePageList,addCate,submitCates,removeCates} from '../../http/api'
export default {
    data() {
        return {
            goodsParams: {
                query: this.$route.query.query || '',
                pagenum: this.$route.query.pagenum || 1,
                pagesize: this.$route.query.pagesize || 5
            },
            result: {},
            cateInfoDialog: false,
            dataTable: [],
            checkList: [],
            options: [],
            cateInfoForm: {cat_name: '',cat_id: ''},
            updateCate: false,
            cateName: ''
        }
    },
    methods:{
        categoriesList(){ //商品数据列表
            const {pagenum,pagesize} = this.goodsParams
            return catePageList(pagenum,pagesize).then(res=>{
                this.dataTable = res;
                // console.log(res);
            })
        },
        handleSizeChange(num) { //每页显示条数发生变化时触发
            this.goodsParams.pagesize=num;
            this.categoriesList();
        },
        handleCurrentChange(num) { //页码发生变化
            this.goodsParams.pagenum=num;
            this.categoriesList();
        },
        async openCate(){ //打开添加分类
            this.cateInfoDialog=true;
            const res = await categoriesList(2);
            this.options = res.data;
        },
        async addCates(){ //添加分类提交
            const res = await addCate({
                cat_pid: this.checkList[1],
                cat_name: this.cateInfoForm.cat_name,
                cat_level: 2
            })
            this.cateInfoDialog=false;
            this.categoriesList();
        },
        updateCates(obj){ //编辑分类信息
            this.updateCate = true;
            this.cateName = obj.cat_name;
            this.cateInfoForm.cat_id = obj.cat_id;
        },
        async submitCates(id,name){ //编辑分类提交
            const res = await submitCates(id,{cat_name:name});
            this.updateCate = false;
            this.categoriesList();
        },
        removeCate(obj){
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                const res = await removeCates(obj.cat_id);
                this.categoriesList();
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        }
    },
    watch:{
        goodsParams:{ //监听params并传入路径
            deep: true,
            handler(val){
                this.$router.push({query: val})
            }
        }
    },
    created(){
        this.categoriesList();
    }
}
</script>
<style lang="scss" scoped>
.categories {
    height: 100%;
    .box-card{
        width: 100%;
        height: 100%;
    } 
    .el-icon-arrow-right:before{
        content: "\E60E";
    }
}     
</style>